<!-- 这是约课填写报名信息的页面 -->
<template>
  <div class="c-pb100">
    <div>
      <div class="c-ph24 c-pt30 c-flex-row c-pb30 c-bd-b1 c-bg-white">
        <div class="c-bd1 c-ww200 c-maxh150 c-text-hidden c-bd1 c-flex-shrink0">
          <img class="c-w100 imgCloseBig" v-lazy="poster!='' || poster!=null ? poster : require('@/assets/activity_defult.png')" alt="" :key="poster" />
        </div>
        <div class="c-pl20 c-w0 c-flex-grow1 c-maxh150 c-flex-column c-justify-sa">
          <div class="c-fs28 c-fc-xblack c-ww-bw c-ww-ba c-text-ellipsis2">{{activityName}}</div>
          <div class="c-fs20 c-fc-sblack c-text-ellipsis1">{{infoData.place}}</div>
          <div class="c-fs20 c-fc-sblack" v-if="infoData.enrollStartAt">
            {{infoData.enrollStartAt | timeFilter}}至{{infoData.enrollEndAt | timeFilter}}
          </div>
          <div class="c-fs20 c-fc-sblack" v-if="reservationMode == 1">{{`${enrollDate} ${enrollTime}`}}</div>
        </div>
      </div>
      <div class="c-bg-sgray c-pt10 ">
        <div class="c-pl24 c-bg-white">
          <div class="c-pr24 c-bd-b1 c-bg-white c-fs24 c-fc-xblack c-pv20 c-w100  c-flex-row">
            <div class="" style="color: red">*</div>
            <div class="c-pr20 c-ww150 c-flex-row ">
              姓名
            </div>
            <input type="text" v-model="name" placeholder="请输入姓名" class="c-textAlign-l c-fs24 c-bd0 c-br10 c-flex-grow1 c-w0 c-fc-xblack" />
          </div>
          <div class="c-bg-white c-pr24 c-bd-b1 c-fs24 c-fc-xblack c-pv20  c-w100 c-flex-row">
            <div class="" style="color: red">*</div>
            <div class="c-pr20 c-ww150 c-flex-row">
              手机号码
            </div>
            <input type="tel" maxlength="11" v-model="mobile" placeholder="请输入手机号" class="c-textAlign-l c-flex-grow1 c-w0 c-fs24 c-bd0 c-br10 c-fc-xblack" />
          </div>
          <div v-for="item in formData" :key="item.afeId" class="c-aligni-center c-bg-white c-fs24 c-fc-xblack c-bd-b1 c-pv20 c-pr24 c-w100 c-flex-row">
            <div v-if="item.isReq==1" class="" style="color: red">*</div>
            <div v-else class="" style="color: white">*</div>
            <div class="c-pr20 c-ww150 c-flex-row ">
              {{item.fieldNo}}
            </div>
            <input v-if="item.isMultiline == 0" type="text" v-model="item.fieldValue" :placeholder="item.fieldName?item.fieldName:'请输入'+item.fieldNo" class="c-textAlign-l c-flex-grow1 c-w0  c-fs24 c-br10  c-bd0 c-fc-xblack" />
            <textarea v-else rows="3" v-model="item.fieldValue" :placeholder="item.fieldName?item.fieldName:'请输入'+item.fieldNo" class="needsclick c-textAlign-l c-flex-grow1 c-w0  c-fs24 c-br10  c-bd0 c-fc-xblack"></textarea>
          </div>
        </div>
      </div>
      <div class="c-ph24" v-if="companyAuth.enableDeclareModule == 0">
        <!-- 约课复训的说明 -->
        <div class="c-pt30" v-if="resData.isRetraining == 1 && infoData.enrollMode !=2 && reservationMode == 2">
          <div class="c-fs26 c-fc-xblack c-pb10 c-flex-row c-aligni-center c-justify-center">
            <img :src="require('@/assets/i/wap/reservation/left-line.png')" class="tips-span">
            <span class="c-ph10">支付复训费用</span>
            <img :src="require('@/assets/i/wap/reservation/right-line.png')" class="tips-span">
          </div>
          <div class="c-fs22 c-fc-sblack c-mt10 c-lh36">
            <p class="c-pb10">复训费用说明：</p>
            <p class="">1、本次预约属于复训{{reId > 0 ? '改签' : ''}}</p>
            <p class="">
              2、复训该专场{{infoData.deposit > 0 ? `需交费${infoData.deposit}元` : '不需要交复训费用'}}。<span v-if="infoData.signUpRefund > 0">（签到成功后，可返{{infoData.signUpRefund}}元到您的账户。）</span>
            </p>
            <p class="" v-if="reId > 0 && resData.beforDeposit > 0">3、改签成功后，复训原场次所交的复训费用{{resData.beforDeposit}}元将全额返回您的账户。</p>
          </div>
        </div>
        <div class="c-pt20" v-if="Number(infoData.seatFee) == 0">
          <span class="c-text-decoration-underline c-fs22 c-fc-sblack" @click="showInstructionsDialog = true">退改说明</span>
        </div>
      </div>
      <div class="c-bg-sgray c-pt10" v-if="infoData.enrollMode == 2 && Number(infoData.seatFee) > 0 && reservationMode == 2">
        <div class="c-ph24 c-bg-white">
          <divider class="">支付席位保证金</divider>
          <div class="c-fs22 c-fc-xblack c-pt14">费用说明：</div>
          <p class="c-pt20 c-fs22 c-fc-sblack c-lh32">因课程现场席位有限，为高效利用现有的学习名额，使更多的学员能够参加现场学习，特设如下规则：</p>
          <p class="c-pt20 c-fs22 c-fc-sblack c-lh32">1、学员预约{{activityName}}时需要缴纳{{Number(infoData.seatFee)}}元席位保证金{{Number(infoData.signUpRefundSeat) > 0 ? '，学员现场签到后平台将会退回保证金'+Number(infoData.signUpRefundSeat)+'元' : ''}}。</p>
          <p class="c-pt20 c-fs22 c-fc-sblack c-lh32">2、如需取消预约的应当在课程签到日前{{infoData.cancelDays > 0 ? `${infoData.cancelDays}天` : ''}}申请{{Number(infoData.cancelRefundSeat) > 0 ? '，取消预约将退还保证金'+Number(infoData.cancelRefundSeat)+'元' : ''}}。</p>
          <p class="c-pv20 c-fs22 c-fc-sblack c-lh32">3、如需更换预约场次的，应对在课程签到日前{{infoData.alterationDays > 0 ? `${infoData.alterationDays}天` : ''}}申请，申请通过后会退还本场席位保证金，且改签成功后本场预约名额作废，不支持继续签到上课。</p>
        </div>
      </div>
      <div class="submit-button c-bg-white c-hh88 c-ph66 c-flex-row c-flex-center">
        <div class="c-fc-white c-w100 c-hh64 c-fs24 c-flex-row c-flex-center c-br32 theme-bg" @click="submit">
          {{$isWxAppIos() && getFee() ? '咨询客服' : ('确认预约' + getFee())}}
        </div>
      </div>
    </div>
    <!-- 退改说明 -->
    <cj-popup v-model="showInstructionsDialog" round :closeable="true" close-icon-position="top-right" close-icon="icon-guanbi" @closed="showInstructionsDialog=false">
      <div class="c-pb60 c-fs24 c-fc-sblack c-textAlign-l c-ww500 c-pt30">
        <p class="c-pb20 c-fs26 c-fc-xblack c-textAlign-c">退改说明</p>
        <div class="c-pl60">
          <p class="c-pv10">
            <template v-if="infoData.alterationDays > 0">
              1、场次开始前{{infoData.alterationDays}}{{infoData.alterationUnit == 1?'分钟':'天'}}支持改签。
            </template>
            <template v-else>
              1、场次开始前均支持改签
            </template>
          </p>
          <p class="c-pv10">
            <template v-if="infoData.cancelDays > 0">
              2、场次开始前{{infoData.cancelDays}}{{infoData.cancelUnit == 1?'分钟':'天'}}支持取消预约。
            </template>
            <template v-else>
              2、场次开始前均支持取消预约
            </template>
          </p>
          <p class="c-pv10">3、预约后逾期未签到，视为已参加。</p>
        </div>
      </div>
    </cj-popup>
  </div>
</template>
<script>
import { Divider } from 'ckjrweb-mp-ui/src/components/index';
import { utilJs } from "@/utils/common.js";
let isClick = false;
export default {
  name: "ReservationEnroll",
  components: {
    Divider
  },
  data() {
    return {
      theme: localStorage.getItem("colorName") ? localStorage.getItem("colorName") : 'mb5_default',
      sectionId: null,
      formData: [], // 要填哪些字段
      poster: "", // 海报
      activityName: "",
      enrollStartAt: "",
      reservationId: null,
      name: "", // 姓名
      mobile: null, // 手机号
      rpId: null, // 约课场期的id 主要约课用到
      infoData: {}, // 基本信息 活动的 约课场次的
      isChangeSign: 1, // 是否改签 1否 2是
      beforeFormData: [],
      hasFormSet: false,
      showInstructionsDialog: false, // 退改说明的弹框
      resData: {}, // 接口返回的数据
      companyAuth: JSON.parse(localStorage.getItem("companyAuth")),
      enrollDate: '',
      enrollTime: '',
      coachId: '',
      reservationMode: 2,
    };
  },
  filters: {
    timeFilter(val) {
      if (!val) {
        return ''
      } else {
        return val.substr(0, 16)
      }
    }
  },
  created() {
    utilJs.appShare(this);
  },
  watch: {
    mobile() {
      if (this.mobile && isNaN(this.mobile)) {
        this.mobile = "";
      } else if (this.mobile.length > 11) {
        this.mobile.substr(0, 11);
      }
    }
  },
  methods: {
    getFee() {
      let fee = this.resData.isRetraining == 1 && this.infoData.deposit > 0 ? this.infoData.deposit : this.infoData.enrollMode == 2 && Number(this.infoData.seatFee) > 0 ? this.infoData.seatFee : '';
      return fee ? `￥${fee}` : '';
    },
    isPhoneNumber: (phoneStr) => {
      var mobile = /^(\d{1,11})$/;
      return mobile.test(phoneStr);
    },
    submit() {
      // 点击提交
      if (isClick) {
        return;
      }
      if (this.name != "" && this.mobile != null) {
        isClick = true;
        if (!this.isPhoneNumber(this.mobile)) {
          this.$showCjToast({
            text: "请输入有效手机号",
            type: "warn",
          });
          isClick = false;
        } else {
          // 手机号正确之后执行
          let valueArr = [];
          for (var i in this.formData) {
            valueArr.push({
              isReq: this.formData[i].isReq,
              name: this.formData[i].fieldNo,
              value: this.formData[i].fieldValue
            });
          }
          if (
            valueArr.filter(item => !item.value && item.isReq == 1)
              .length == 0
          ) {
            // 必填信息填完
            /** 约课确认预约 */
            this.confirmReservation(valueArr);
          } else {
            isClick = false;
            this.$showCjToast({
              text: "请把信息填写完整",
              type: "warn",
            });
          }
        }
      } else {
        isClick = false;
        this.$showCjToast({
          text: "姓名或手机号不能为空",
          type: "warn",
        });
      }
    },
    confirmReservation(valueArr) { // 约课填完信息 确认预约
      let data = {
        alteration: this.isChangeSign, // 是否改签 路由带过来的
        reId: this.reId, // 改签原id 改签时才用到
        rtId: this.reservationId, // 约课主题的id
        rsId: this.sectionId, // 场次id
        rpId: this.rpId, // 场期id
        name: this.name,
        mobile: this.mobile,
        fieldVal: JSON.stringify(valueArr),
        enrollDate: this.enrollDate,
        enrollTime: this.enrollTime,
        coachId: this.coachId
      };
      let $this = this;
      utilJs.postMethod(global.apiurl + 'reservations/createEnroll', data, function (res) {
        isClick = false;
        /***
         * 是复训的并且需要交复训费用的 跳转去支付页面
         */
        if (($this.resData.isRetraining == 1 && $this.infoData.deposit > 0) || ($this.infoData.enrollMode == 2 && Number($this.infoData.seatFee) > 0)) {
          let payInfo = {
            cId: res.reId,
            extId: res.reId, // 接口返回的预约的id
            ckFrom: $this.infoData.enrollMode == 1 ? global.ckFrom.reReservation : global.ckFrom.seatFee, // 复训的prodType 97， 席位费187
            isFromInvite: 0,
            activityId: $this.reservationId
          }
          if ($this.$route.query.refereeId) {
            payInfo.refereeId = $this.$route.query.refereeId;
          }
          $this.$routerGo($this, "replace", {
            path: `/homePage/course/coursePay`,
            query: payInfo
          });
          return
        }
        $this.$showCjToast({
          text: "预约成功",
          type: "success",
        }).then(() => {
          $this.$routerGo($this, "replace", {
            path: `/activity/ticketNum?activityId=${$this.reservationId}&from=reservation`
          });
        });
      }, function () {
        isClick = false;
      })
    },
    //分享
    wechatShare: function () {
      utilJs.wechatConfig("", "", "", "", function () { });
    },
    //手机端分享
    appShare: function () {
      utilJs.appShareTrue("", "", "", "");
    },
    /** 约课报名表单的接口 */
    /**  获取表单的信息
     * 约课主题id(rtId ===> reservationId)
     * 场次id(rsId ===> sectionId)
     * 场次下的场期id(rpId ===> rpId)
     * 改签的id(reId)*/
    getReservationEnrollInfo() {
      let $this = this;
      utilJs.postMethod(global.apiurl + 'reservations/getReservationBaseInfo',
        {
          rpId: this.rpId,
          rsId: this.sectionId,
          rtId: this.reservationId,
          reId: this.reId
        },
        function (res) {
          $this.poster = res.baseinfo.poster;
          $this.activityName = res.baseinfo.name;
          $this.name = res.userinfo.nickname;
          $this.mobile = res.userinfo.mobile;
          $this.infoData = res.baseinfo;
          $this.formData = res.fields;
          // 所有信息
          $this.resData = res;
          // 记录之前填过的表单信息
          $this.beforeFormData = res.beforeInfo;
          // 将以前填过的信息显示出来
          // beforeFormData没值时return
          if (!$this.beforeFormData) {
            return;
          }
          for (let i in $this.formData) {
            if ($this.beforeFormData.filter(item => item.name == $this.formData[i].fieldNo).length > 0) {
              $this.formData[i].fieldValue = $this.beforeFormData.filter(item => item.name == $this.formData[i].fieldNo)[0].value;
            }
          }
        }
      );
    }
  },
  activated() {
    setDocumentTitle("填写信息");// eslint-disable-line
    isClick = false;
    this.formData = [];
    this.beforeFormData = [];
    this.sectionId = this.$route.query.rsId;
    this.reservationId = this.$route.query.rtId;
    // 约课的场期id
    this.rpId = this.$route.query.rpId;
    // 约课的是否改签 1 否 2是 session查数据 有reId就是改签
    this.isChangeSign = this.$route.query.reId ? 2 : 1;
    this.reId = this.$route.query.reId ? this.$route.query.reId : -1;
    // 根据来源调用接口
    this.enrollDate = this.$route.query.enrollDate || '';
    this.enrollTime = this.$route.query.enrollTime || '';
    this.coachId = this.$route.query.coachId || '';
    this.reservationMode = this.$route.query.reservationMode || 2;
    this.getReservationEnrollInfo();
    this.wechatShare();
  },
  deactivated() {
    this.name = "";
    this.mobile = "";
    this.poster = '';
  }
};
</script>
<style scoped>
textarea {
  resize: none;
}
.tips-span{
  width:1.3rem;
  height:1px;
}
.submit-button{
  position: fixed;
  bottom:0;
  max-width: 640px;
  width: 100%;
  z-index: 11;
}
.vux-divider {
  color: #333!important;
  font-size: 0.6rem!important;
  padding: 0.5rem 0!important;
}
.vux-divider:after, .vux-divider:before {
  background-size: 2.5rem 2px!important;
}
</style>


